<template>
  <div class="stat-card-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="12" :sm="6" v-for="(item, key) in stats" :key="item.message + 'cpn' + key">
        <div class="stat-card" :class="key">
          <div class="stat-icon">
            <el-icon>
              <User v-if="key === 'total'" />
              <Clock v-if="key === 'pending'" />
              <VideoCamera v-if="key === 'interview'" />
              <Medal v-if="key === 'offer'" />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ item.value }}</div>
            <div class="stat-label">{{ item.message }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import type { StatsObject } from './types';
defineOptions({ name: 'StatCard' })
defineProps<{
  stats: StatsObject
}>()

onMounted(() => {
})
onUnmounted(() => { })
defineExpose({})
</script>

<style scoped>
.stat-card-container {
  margin-top: 1px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  border-left: 4px solid;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card.total {
  border-left-color: #409eff;
}

.stat-card.pending {
  border-left-color: #e6a23c;
}

.stat-card.interview {
  border-left-color: #67c23a;
}

.stat-card.offer {
  border-left-color: #f56c6c;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.total .stat-icon {
  background: #409eff;
}

.pending .stat-icon {
  background: #e6a23c;
}

.interview .stat-icon {
  background: #67c23a;
}

.offer .stat-icon {
  background: #f56c6c;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}
</style>
